import React from "react";
import "./pop.css";
import { orderList } from "./mock/order";

const statusList = [
  {
    id: 1,
    name: "进行中",
    color: "blue",
  },
  {
    id: 2,
    name: "已延期",
    color: "orange",
  },
  {
    id: 3,
    name: "已完成",
    color: "green",
  },
];
class Pop extends React.Component {
  state = {
    date: this.props.changeInfo.date || "",
    orderName: this.props.changeInfo.orderName || "",
    status: this.props.changeInfo.status || 1,
    id: this.props.changeInfo.id || 0,
  };

  render() {
    return (
      <div className="pop">
        <div>{this.props.title}</div>
        <div className="content">
          <div className="line">
            日期 :{" "}
            <input
              type="text"
              value={this.state.date}
              onChange={(e) => {
                this.setState({
                  ...this.state,
                  date: e.target.value,
                });
              }}
            />
          </div>
          <div className="line">
            订单名称 :
            <input
              type="text"
              value={this.state.orderName}
              onChange={(e) => {
                this.setState({
                  ...this.state,
                  orderName: e.target.value,
                });
              }}
            />
          </div>
          <div className="line">
            订单状态 :
            <select
              value={this.state.status}
              onChange={(e) => {
                this.setState({
                  ...this.state,
                  status: e.target.value,
                });
              }}
            >
              {statusList.map((item) => (
                <option key={item.id} value={item.id}>
                  {item.name}
                </option>
              ))}
            </select>
          </div>

          <div className="bottom">
            <button onClick={this.props.cancel}>取消</button>
            <button onClick={this.props.confirmAdd.bind(this, this.state)}>
              确认
            </button>
          </div>
        </div>
      </div>
    );
  }
}
class Crud extends React.Component {
  state = {
    list: [],
    searchParams: {
      date: "",
      orderName: "",
      status: "",
    },
    changeInfo: {},
    dialogVisible: false,
  };

  componentDidMount() {
    this.setState({
      list: orderList,
    });
  }

  search = () => {
    const { date, orderName, status } = this.state.searchParams;
    //没有请求接口所以搜索都从最初的里面搜索
    let list = [...orderList];
    if (date) {
      list = list.filter((item) => item.date.indexOf(date) !== -1);
    }
    if (orderName) {
      list = list.filter((item) => item.orderName.indexOf(orderName) !== -1);
    }
    if (status) {
      list = list.filter((item) => item.status === +status);
    }
    this.setState({
      list,
    });
  };

  reset = () => {
    this.setState({
      list: orderList,
      searchParams: {
        date: "",
        orderName: "",
        status: "",
      },
    });
  };

  showStatus(info) {
    const data = statusList.find((item) => item.id == info.status);
    return <span style={{ color: data.color }}>{data.name}</span>;
  }

  remove({ id }) {
    let list = [...this.state.list];
    console.log(
      "list.filter((item) => item.id !== id)",
      id,
      list.filter((item) => item.id !== id)
    );
    this.setState({
      list: list.filter((item) => item.id !== id),
    });
  }

  edit(info) {
    this.setState({
      changeInfo: info,
      dialogVisible: true,
    });
  }

  confirmAdd = (e) => {
    let list = this.state.list;
    if (!e.date || !e.orderName || !e.status) {
      return alert("请输入完整信息");
    }
    if (e.id) {
      //修改
      list = list.map((item) => {
        if (item.id === e.id) {
          return e;
        }
        return item;
      });
    } else {
      let data = e;
      data.id = this.state.list.length + 1;
      list.push(data);
    }

    this.setState({
      dialogVisible: false,
      list: [...list],
      changeInfo: {},
    });
  };

  render() {
    return (
      <div>
        <div>
          日期：
          <input
            type="text"
            value={this.state.searchParams.date}
            onChange={(e) => {
              this.setState({
                searchParams: {
                  ...this.state.searchParams,
                  date: e.target.value,
                },
              });
            }}
          />
          订单名称：
          <input
            type="text"
            value={this.state.searchParams.orderName}
            onChange={(e) => {
              this.setState({
                searchParams: {
                  ...this.state.searchParams,
                  orderName: e.target.value,
                },
              });
            }}
          />
          订单状态：
          <select
            value={this.state.searchParams.status}
            onChange={(e) => {
              this.setState({
                searchParams: {
                  ...this.state.searchParams,
                  status: e.target.value,
                },
              });
            }}
          >
            <option value="">全部</option>
            {statusList.map((item) => (
              <option key={item.id} value={item.id}>
                {item.name}
              </option>
            ))}
          </select>
          <button onClick={this.search}>搜索</button>
          <button onClick={this.reset}>重置</button>
        </div>
        <div>
          <button
            onClick={() => {
              this.setState({
                dialogVisible: true,
              });
            }}
          >
            添加订单
          </button>
        </div>
        <ul>
          <li>日期 - 订单名称 - 状态 - 操作</li>
          {this.state.list.map((item) => (
            <li key={item.id}>
              {item.date} - {item.orderName} -{this.showStatus(item)}
              <button onClick={this.remove.bind(this, item)}>删除</button>
              <button onClick={this.edit.bind(this, item)}>编辑</button>
            </li>
          ))}
        </ul>

        {this.state.dialogVisible && (
          <Pop
            title={this.state.changeInfo.id ? "修改订单" : "创建订单"}
            changeInfo={this.state.changeInfo}
            cancel={() => {
              this.setState({
                dialogVisible: false,
              });
            }}
            confirmAdd={(e) => {
              this.confirmAdd(e);
            }}
          />
        )}
      </div>
    );
  }
}
function App() {
  return (
    <div>
      <Crud></Crud>
    </div>
  );
}

export default App;
